<template>
  <div class="videoList">
    <div
      style="width:100%;height:4rem;position:relative;background:#aaa;"
      v-if='show'
    >
      <video
        id="my-video"
        class="video-js vjs-default-skin"
        controls
        :poster="'http://img.wangyuhudong.com/'+info.icon"
      >
        <source
          :src="info.video_url"
          type="application/x-mpegURL"
        >
        您的浏览器不支持 video 标签。
      </video>
    </div>
    <div
      class="bg-fff"
      style="padding:0.3rem"
    >
      <div class="fs28 c-333">{{info.title}}</div>
      <div class="c-flex c-999 fs24 c-a-c mt20">
        <div><i class="iconfont icon-shipin fs18"></i> {{info.read_num}}</div>
        <div style="margin-left:0.3rem">{{info.timer_date}}</div>
      </div>
    </div>
    <div class="mt20 bg-fff c-333 fs28 br-b pt20 pb20 pl30 pr30">
      推荐
    </div>
    <mt-tab-container class="bg-fff">
      <mt-tab-container-item>
        <div
          v-for="obj in list"
          :key="obj.name"
          class="list-wrap"
          @click="getDetail(obj.id)"
        >
          <div
            style="padding:0.2rem 0.3rem;"
            class="c-flex br-b"
          >
            <div class="pic"><img
                :src="'http://img.wangyuhudong.com/'+obj.icon"
                alt=""
                style="width:100%;height:1.1rem;"
              > </div>
            <div
              class="c-box-flex"
              style="position:relative;"
            >
              <div class="content text-hidden">{{obj.title}}</div>
              <div
                class="c-999 mt15"
                style="position: absolute;left:0;bottom:0"
              ><i class="iconfont icon-shipin fs18"></i>{{obj.read_num}}</div>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>

     <div class="c-flex c-j-c loading">
      <p v-show="loading" class="page-infinite-loading">
        <mt-spinner type="fading-circle" color="#fff" :size="30"></mt-spinner>加载中...
      </p>
    </div>
    <div class="mask" v-show="loading"></div>
  </div>

</template>

<script>
import videojs from "video.js";
import "videojs-contrib-hls";
export default {
  name: "videoList",
  data() {
    return {
      list: [],
      info: {},
      show: false,
      loading:false
    };
  },
  mounted() {
    document.title = "";
    this.getDetail(this.$route.query.id);
  },
  methods: {
    getDetail(id) {
      this.show = false;
      this.loading = true;
      this.axios
        .post("invoking/invokingXQ", {
          id: id
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 0) {
            this.info = res.data.object.info;
            this.list = res.data.object.recommend;
            this.show = true;
            this.loading = false;
            this.$nextTick(() => {
              videojs(
                "my-video",
                {
                  bigPlayButton: false,
                  textTrackDisplay: false,
                  posterImage: true,
                  errorDisplay: false,
                  controlBar: true
                },
                function() {
                  //   this.play();
                }
              );
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.video-js {
  width: 100%;
  height: 100%;
}
.pic {
  width: 1.58rem;
  height: 1.1rem;
  background: #f6f6f6;
  margin-right: 0.3rem;
  border-radius: 0.06rem;
}

.title {
  font-size: 0.3rem;
  color: #333;
  margin: 0.1rem 0;
}

.content {
  font-size: 0.24rem;
  color: #999;
  line-height: 0.36rem;
}

.btn {
  padding: 0 0.2rem;
  color: #d2d2d2;
  &:after {
    border-radius: 1rem;
  }
}
</style>
